<template>
  <div class="api-list-table">
    <a-table
      :dataSource="apiList"
      :columns="columns"
      :pagination="false"
      :rowKey="record => record.name"
    >
      <!-- 方法列 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'method'">
          <a-tag :color="record.method === 'get' ? 'blue' : 'orange'">
            {{ record.method.toUpperCase() }}
          </a-tag>
        </template>
        
        <!-- 操作列 -->
        <template v-if="column.key === 'action'">
          <a-button type="primary" :loading="loading" @click="handleTest(record)">
            测试
          </a-button>
        </template>
      </template>
      
      <!-- 展开行 -->
      <template #expandedRowRender="{ record }">
        <a-form
          layout="vertical"
          ref="formRef"
          :model="formState"
        >
          <!-- 路径参数 -->
          <template v-if="record.pathParams && record.pathParams.length > 0">
            <a-typography-title :level="5">路径参数</a-typography-title>
            <div class="param-grid">
              <a-form-item
                v-for="param in record.pathParams"
                :key="param.name"
                :label="`${param.name}${param.required ? ' *' : ''}`"
                :name="param.name"
                :rules="param.required ? [{ required: true, message: '此参数必填' }] : []"
              >
                <a-input
                  v-model:value="formState[param.name]"
                  :placeholder="param.description"
                />
              </a-form-item>
            </div>
          </template>
          
          <!-- 请求参数 -->
          <template v-if="record.params && record.params.length > 0">
            <a-typography-title :level="5">请求参数</a-typography-title>
            <div class="param-grid">
              <a-form-item
                v-for="param in record.params"
                :key="param.name"
                :label="`${param.name}${param.required ? ' *' : ''}`"
                :name="param.name"
                :rules="param.required ? [{ required: true, message: '此参数必填' }] : []"
              >
                <!-- 根据参数类型渲染不同的输入控件 -->
                <a-select
                  v-if="param.type === 'select'"
                  v-model:value="formState[param.name]"
                  :placeholder="param.description"
                >
                  <a-select-option
                    v-for="opt in param.options"
                    :key="opt.value"
                    :value="opt.value"
                  >
                    {{ opt.label }}
                  </a-select-option>
                </a-select>
                
                <a-textarea
                  v-else-if="param.type === 'textarea'"
                  v-model:value="formState[param.name]"
                  :placeholder="param.description"
                  :rows="4"
                />
                
                <a-input-number
                  v-else-if="param.type === 'number'"
                  v-model:value="formState[param.name]"
                  :placeholder="param.description"
                />
                
                <a-input
                  v-else
                  v-model:value="formState[param.name]"
                  :placeholder="param.description"
                />
              </a-form-item>
            </div>
          </template>
        </a-form>
      </template>
    </a-table>
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
  name: 'ApiListTable',
  props: {
    apiList: {
      type: Array,
      required: true
    }
  },
  emits: ['test-api'],
  setup(props, { emit }) {
    const formRef = ref(null);
    const formState = reactive({});
    const loading = ref(false);
    
    const columns = [
      {
        title: 'API 名称',
        dataIndex: 'name',
        key: 'name',
        width: 200
      },
      {
        title: '请求方法',
        dataIndex: 'method',
        key: 'method',
        width: 100
      },
      {
        title: 'URL',
        dataIndex: 'url',
        key: 'url',
        width: 250
      },
      {
        title: '描述',
        dataIndex: 'description',
        key: 'description'
      },
      {
        title: '操作',
        key: 'action',
        width: 100
      }
    ];
    
    const handleTest = async (record) => {
      loading.value = true;
      
      try {
        // 验证表单
        if (formRef.value) {
          await formRef.value.validate();
        }
        
        // 发送测试请求
        emit('test-api', record, formState);
      } catch (e) {
        console.error('表单验证失败', e);
      } finally {
        loading.value = false;
      }
    };
    
    return {
      formRef,
      formState,
      loading,
      columns,
      handleTest
    };
  }
});
</script>

<style scoped>
.api-list-table {
  margin-bottom: 20px;
}

.param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
</style> 